<template>
  <el-aside class="index-aside" height="100vh" width="210px">
    <div class="index-aside-inner menulist">
      <div v-for="item in filteredMenuList" :key="item.roleName" class="menulist-item">
        <div class="menulistImg" v-if="false && menulistStyle == 'vertical'">
          <el-image v-if="'http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg'"
            src="http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg" fit="cover" />
        </div>
        <el-menu mode="vertical" :unique-opened="true" class="el-menu-demo" background-color="#2c3e50"
          text-color="rgba(255, 255, 255, 0.7)" active-text-color="#ffffff"
          :default-active="defaultActive">
          <el-menu-item index="0" :style="menulistBorderBottom" @click="menuHandler('index')"><i
              v-if="true" class="el-icon-s-home" />首页</el-menu-item>
          <el-submenu index="1" :style="menulistBorderBottom">
            <template slot="title">
              <i v-if="true" class="el-icon-user-solid" />
              <span>个人中心</span>
            </template>
            <el-menu-item index="1-1" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
            <el-menu-item index="1-2" @click="menuHandler('center')">个人信息</el-menu-item>
          </el-submenu>
          <el-submenu :style="menulistBorderBottom" v-for=" (menu,index) in item.backMenu" :key="menu.menu"
            :index="(index+2).toString()">
            <template slot="title">
              <i v-if="true" :class="icons[index]" />
              <span>{{ menu.menu }}</span>
            </template>
            <el-menu-item v-for=" (child,sort) in menu.child" :key="sort" :index="(index+2)+'-'+sort"
              @click="menuHandler(child.tableName)">{{ child.menu }}</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
  </el-aside>
</template>
<script>
import menu from '@/utils/menu'
export default {
  data() {
    return {
      menuList: [],
      dynamicMenuRoutes: [],
      role: '',
      defaultActive: '0',
      icons: [
        'el-icon-s-cooperation',
        'el-icon-s-order',
        'el-icon-s-platform',
        'el-icon-s-fold',
        'el-icon-s-unfold',
        'el-icon-s-operation',
        'el-icon-s-promotion',
        'el-icon-s-release',
        'el-icon-s-ticket',
        'el-icon-s-management',
        'el-icon-s-open',
        'el-icon-s-shop',
        'el-icon-s-marketing',
        'el-icon-s-flag',
        'el-icon-s-comment',
        'el-icon-s-finance',
        'el-icon-s-claim',
        'el-icon-s-custom',
        'el-icon-s-opportunity',
        'el-icon-s-data',
        'el-icon-s-check',
        'el-icon-s-grid',
        'el-icon-menu',
        'el-icon-chat-dot-square',
        'el-icon-message',
        'el-icon-postcard',
        'el-icon-position',
        'el-icon-microphone',
        'el-icon-close-notification',
        'el-icon-bangzhu',
        'el-icon-time',
        'el-icon-odometer',
        'el-icon-crop',
        'el-icon-aim',
        'el-icon-switch-button',
        'el-icon-full-screen',
        'el-icon-copy-document',
        'el-icon-mic',
        'el-icon-stopwatch',
      ],
      menulistStyle: 'vertical',
      menulistBorderBottom: {},
    }
  },
  computed: {
    filteredMenuList() {
      return this.menuList.filter(item => item.roleName === this.role)
    }
  },
  beforeCreate() {
    // 在组件创建前检查路由，确保首页路由正确
    if (window.location.hash === '#/' || window.location.hash === '') {
      window.location.hash = '#/index'
    }
  },
  created() {
    const menus = menu.list()    
    this.menuList = menus
    this.role = this.$storage.get('role')
    
    setTimeout(()=>{
      this.menulistStyleChange()
    },10)
    this.icons.sort(()=>{
      return (0.5-Math.random())
    })
    this.lineBorder()

    // 确保路由正确
    if (this.$route.path === '/' || !this.$route.path) {
      this.$router.replace('/index').catch(() => {})
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 强制设置首页高亮
      if (this.$refs.menu) {
        this.$refs.menu.activeIndex = '0'
        this.$refs.menu.initializeMenu()
        
        // 确保样式应用
        const activeMenuItem = document.querySelector('.el-menu-item[index="0"]')
        if (activeMenuItem) {
          activeMenuItem.classList.add('is-active')
          activeMenuItem.style.backgroundColor = '#4885ff'
        }
      }
      
      // 如果是根路径，跳转到index
      if (this.$route.path === '/' || !this.$route.path) {
        this.$router.replace('/index').catch(() => {})
      }
    })
  },
  watch: {
    $route: {
      handler(to) {
        if (to.path === '/' || to.path === '/index') {
          this.$nextTick(() => {
            if (this.$refs.menu) {
              this.$refs.menu.activeIndex = '0'
              this.$refs.menu.initializeMenu()
            }
            const activeMenuItem = document.querySelector('.el-menu-item[index="0"]')
            if (activeMenuItem) {
              activeMenuItem.classList.add('is-active')
              activeMenuItem.style.backgroundColor = '#4885ff'
            }
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    menuHandler(name) {
      let path = '/' + name
      this.$router.push(path).catch(() => {})
    },
    lineBorder() {
      let style = 'vertical'
      let w = '0px'
      let s = 'solid'
      let c = '#ccc'
      if(style == 'vertical') {
        this.menulistBorderBottom = {
          borderBottomWidth: w,
          borderBottomStyle: s,
          borderBottomColor: c
        }
      } else {
        this.menulistBorderBottom = {
          borderRightWidth: w,
          borderRightStyle: s,
          borderRightColor: c
        }
      }
    },
    setMenulistIconColor() {
      this.$nextTick(()=>{
        document.querySelectorAll('.menulist .el-submenu__title .el-submenu__icon-arrow').forEach(el=>{
          el.style.color = "rgba(153, 153, 153, 1)"
        })
      })
    },
    menulistStyleChange() {
      this.setMenulistIconColor()
      this.setMenulistStyleHeightChange()
      let str = "vertical"
      if("horizontal" === str) {
        this.$nextTick(()=>{
          document.querySelectorAll('.el-container .el-container').forEach(el=>{
            el.style.display = "block"
            el.style.paddingTop = "60px" // header 高度
          })
          document.querySelectorAll('.el-aside').forEach(el=>{
            el.style.width = "100%"
            el.style.height = "60px"
            el.style.paddingTop = '0'
          })
          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
            el.style.paddingTop = '0'
          })
        })
      }
      if("vertical" === str) {
        this.$nextTick(()=>{
          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
            el.style.paddingTop = "60px"
          })
        })
      }
    },
    setMenulistStyleHeightChange() {
      this.$nextTick(()=>{
        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-menu-item').forEach(el=>{
          el.style.height = "60px"
          el.style.lineHeight = "60px"
        })
        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-submenu>.el-submenu__title').forEach(el=>{
          el.style.height = "60px"
          el.style.lineHeight = "60px"
        })
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.index-aside {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 210px;

  .menulistImg {
    padding: 25px 0;
    box-sizing: border-box;
    background-color: #ff0000;

    .el-image {
      margin: 0 auto;
      width: 100px;
      height: 100px;
      border-radius: 100%;
      display: block;
    }
  }

  .index-aside-inner {
    height: 100%;
    margin-right: -17px;
    margin-bottom: -17px;
    overflow: scroll;
    overflow-x: hidden !important;
    padding-top: 60px;
    box-sizing: border-box;

    &:focus {
      outline: none;
    }

    .el-menu {
      border: 0;
      height: 100%;
    }
  }

  .menulist-item {
    height: 100%;
    border: 0;
    background-color: #2c3e50;
  }
}
</style>

<style>
.el-menu-item.is-active {
  background-color: #4885ff !important;
}

.el-menu .el-menu-item:hover:not(.is-active) {
  background-color: rgba(72, 133, 255, 0.7) !important;
}

.el-submenu__title:hover {
  background-color: rgba(72, 133, 255, 0.7) !important;
}
</style>
